<template>
  <view class="page">
    <view class="header">
      <!-- 左 -->
      <view class="version">v1.01</view>
      <!-- 中 -->
      <!-- <view class="lock">
        <view class="lock_box">
          <view class="left">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/automatic.png"
              mode="scaleToFill"
              class="left_iocn"
            />
          </view>
          <view class="middle">
            <text class="middle_text">123</text>
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="middle_iocn"
            />
          </view>
          <view class="right">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="right_iocn"
            />
          </view>
        </view>
        <view class="lock_box">
          <view class="left">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/automatic.png"
              mode="scaleToFill"
              class="left_iocn"
            />
          </view>
          <view class="middle">
            <text class="middle_text">123</text>
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="middle_iocn"
            />
          </view>
          <view class="right">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="right_iocn"
            />
          </view>
        </view>
        <view class="lock_box">
          <view class="left">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/automatic.png"
              mode="scaleToFill"
              class="left_iocn"
            />
          </view>
          <view class="middle">
            <text class="middle_text">123</text>
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="middle_iocn"
            />
          </view>
          <view class="right">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="right_iocn"
            />
          </view>
        </view>
        <view class="lock_box">
          <view class="left">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/automatic.png"
              mode="scaleToFill"
              class="left_iocn"
            />
          </view>
          <view class="middle">
            <text class="middle_text">123</text>
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="middle_iocn"
            />
          </view>
          <view class="right">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="right_iocn"
            />
          </view>
        </view>
        <view class="lock_box">
          <view class="left">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/automatic.png"
              mode="scaleToFill"
              class="left_iocn"
            />
          </view>
          <view class="middle">
            <text class="middle_text">123</text>
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="middle_iocn"
            />
          </view>
          <view class="right">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="right_iocn"
            />
          </view>
        </view>
        <view class="lock_box">
          <view class="left">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/automatic.png"
              mode="scaleToFill"
              class="left_iocn"
            />
          </view>
          <view class="middle">
            <text class="middle_text">123</text>
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="middle_iocn"
            />
          </view>
          <view class="right">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="right_iocn"
            />
          </view>
        </view>
        <view class="lock_box">
          <view class="left">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/automatic.png"
              mode="scaleToFill"
              class="left_iocn"
            />
          </view>
          <view class="middle">
            <text class="middle_text">123</text>
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="middle_iocn"
            />
          </view>
          <view class="right">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="right_iocn"
            />
          </view>
        </view>
      </view> -->

      <view class="lock">
        <view
          v-for="(item, index) in lockData"
          :key="index"
          class="lock_box"
        >
          <view class="left">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/automatic.png"
              mode="scaleToFill"
              class="left_iocn"
            />
          </view>
          <view class="middle">
            <text class="middle_text">{{ item.code }}</text>
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="middle_iocn"
            />
          </view>
          <view class="right">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/btn_lamp_ou_on.png"
              mode="scaleToFill"
              class="right_iocn"
            />
          </view>
        </view>
      </view>
      <!-- 右 -->
      <view class="weekday">2024/05/20 15:20周二</view>
    </view>
    <view class="content">
      <!-- <view class="switch_top">
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
      </view>
      <view class="switch_bottom">
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
      </view> -->
      <view class="switch_top">
        <view
          v-for="(item, index) in switchBoxdata"
          :key="'top-' + index"
          v-if="index < 5"
          class="switch_box"
        >
          <image
            class="switch_img"
            :src="item.image"
            mode="scaleToFill"
          />
          <text class="switch_text">{{ item.text }}</text>
        </view>
      </view>
      <view class="switch_bottom">
        <view
          v-for="(item, index) in switchBoxdata"
          :key="'bottom-' + index"
          v-if="index >= 5"
          class="switch_box"
        >
          <image
            class="switch_img"
            :src="item.image"
            mode="scaleToFill"
          />
          <text class="switch_text">{{ item.text }}</text>
        </view>
      </view>
    </view>
    <view class="content2">
      <!-- <view class="switch_top">
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
      </view> -->
      <view class="switch_top">
        <view
          v-for="(item, index) in switchBoxdata2"
          :key="'top-' + index"
          v-if="index < 5"
          class="switch_box"
        >
          <image
            class="switch_img"
            :src="item.image"
            mode="scaleToFill"
          />
          <text class="switch_text">{{ item.text }}</text>
        </view>
      </view>
      <!-- 底部三个自己定制 -->
      <view
        class="switch_bottom2"
        @tap="getcontrol"
      >
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="switch_box">
          <image
            class="switch_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
            mode="scaleToFill"
          />
          <text class="switch_text"> 底部文字</text>
        </view>
        <view class="btn_box">
          <view>设置</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { deviceControl } from '@/api/system/equiment/equipmenttest.js'
  // cmd命令控制类型-写死
  const CmdType = {
    PowerSwitch: 1,
    LightSwitch: 2,
    FreezeSwitch: 3,
    ChillSwitch: 4,
    XF1Switch: 5,
    XF2Switch: 6,
    Booking: 7,
    AutoOrManual: 8,
    DeviceStatus: 9,
    DeviceTime: 10,
    AutoCurve: 11,
    InnerReference: 12,
    Reset: 13,
    APPSendOTAPackage: 14,
  }
  // 控制开关的value的值-写死
  const CLOSE = false
  const OPEN = true
  // 协议的接口方法
  import getPrefixAndControl from '../../controlpkg/util/getPrefixAndControlTest'
  // mqtt的连接常量

  import { MQTT_IP, MQTT_OPTIONS } from '@/utils/mqtt.js'
  var Paho = require('../../utils/paho-mqtt')

  export default {
    components: {},
    data() {
      return {
        lockData: [
          { code: '123' },
          { code: '123' },
          { code: '123' },
          { code: '123' },
          { code: '123' },
          { code: '123' },
          { code: '123' },
        ],
        switchBoxdata: [
          {
            text: '底部文字1',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
          {
            text: '底部文字2',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
          {
            text: '底部文字3',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
          {
            text: '底部文字4',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
          {
            text: '底部文字5',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
          {
            text: '底部文字6',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
          {
            text: '底部文字7',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
          {
            text: '底部文字8',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
          {
            text: '底部文字9',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
          {
            text: '底部文字10',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
        ],
        switchBoxdata2: [
          {
            text: '底部文字1',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
          {
            text: '底部文字2',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
          {
            text: '底部文字3',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
          {
            text: '底部文字4',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
          {
            text: '底部文字5',
            image: 'https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png',
          },
        ],
        // mqtt的连接和监听的必须参数
        equipmentNo: '9A34F2B1E8C7D560',
        equipmentTypeId: '99999998',
        subTopic: 'SERVER.99999998.9A34F2B1E8C7D560',
      }
    },
    methods: {
      // 先下发数据状态确认
      // getIndexData() {
      //   this.realTime = setInterval(async () => {
      //     //进入界面链接mqtt后自动订阅
      //     const success = await getPrefixAndControl.getConfigList(
      //       this.equipmentTypeId,
      //       this.equipmentNo,
      //       CmdType.AutoOrManual,
      //       OPEN
      //     )
      //     console.log('test-确定数据下发的状态2', success)
      //     if (success.code != 200) {
      //       this.$modal.msgError('下发失败')
      //     }
      //   }, 2000)
      // },
      // 连接mqtt协议方法
      // connect() {
      //   try {
      //     // 使用 thant 代替 this，避免在回调函数中 this 的指向问题
      //     const thant = this
      //     // 生成客户端的随机ID
      //     this.client = new Paho.Client(
      //       MQTT_IP,
      //       'SERVER_' +
      //         Math.floor(Math.random() * 999) +
      //         1 +
      //         '_' +
      //         thant.equipmentNo
      //     )
      //     //后面这个字符串可以用一个随机字符串方法随机生成
      //     var connectOptions = {
      //       timeout: MQTT_OPTIONS.timeout, // 连接超时时间
      //       useSSL: MQTT_OPTIONS.useSSL, // 是否使用 SSL
      //       cleanSession: MQTT_OPTIONS.cleanSession, //实现QoS>0必须设置为false，代表不清除，是持久会话
      //       keepAliveInterval: MQTT_OPTIONS.keepAliveInterval, // 保持连接的间隔时间
      //       reconnect: MQTT_OPTIONS.reconnect, //意外断开之后会重连，第一次1秒后重连，往后每次翻倍直到2分钟，后续保持2分钟
      //       mqttVersion: MQTT_OPTIONS.mqttVersion,
      //       userName: MQTT_OPTIONS.username, // 用户名
      //       password: MQTT_OPTIONS.password, // 密码
      //       onSuccess: function () {
      //         thant.client.onMessageArrived = function (msg) {
      //           console.log('test-m连接的原始数据1', msg)
      //           const data = JSON.parse(
      //             msg.payloadString.replace(/\u0000*$/, '')
      //           )
      //           console.log('test-JSON.parse方法处理payloadString的数据1', data)
      //           if (data != null) {
      //             data.Data.forEach((item, index) => {
      //               if (item.Cmd == 9) {
      //                 // 解析mqtt的数据，到页面展示去
      //                 thant.indexAllData = parsingData.getNumBycommand(
      //                   item.Cmd,
      //                   item.Value
      //                 )

      //                 console.log(
      //                   'test-打印页面数据indexALLdata1',
      //                   thant.indexAllData
      //                 )
      //                 uni.setStorageSync(
      //                   'controlPanelVesion',
      //                   thant.indexAllData.controlPanelVesion
      //                 )
      //                 uni.setStorageSync(
      //                   'upperComputerVesion',
      //                   thant.indexAllData.upperComputerVesion
      //                 )
      //                 if (thant.indexAllData.communicationState != 1) {
      //                   thant.$modal.msgError('通讯错误')
      //                   clearInterval(this.realTime)
      //                   uni.stopPullDownRefresh()
      //                   uni.hideLoading({
      //                     noConflict: true,
      //                   })
      //                   return
      //                 }
      //                 if (thant.indexAllData.connt == false) {
      //                   thant.$modal.msg('设备订阅已断开，请重启设备')
      //                   clearInterval(this.realTime)
      //                   uni.stopPullDownRefresh()
      //                   uni.hideLoading({
      //                     noConflict: true,
      //                   })
      //                   return
      //                 }
      //                 if (thant.indexAllData.currState == 1) {
      //                   thant.stateImgUrl =
      //                     'https://mkservice.mk-iot.com/subFile/mk2240/curve_two.svg'
      //                 } else if (thant.indexAllData.currState == 2) {
      //                   thant.stateImgUrl =
      //                     'https://mkservice.mk-iot.com/subFile/mk2240/curve_three.svg'
      //                 } else if (thant.indexAllData.currState == 3) {
      //                   thant.stateImgUrl =
      //                     'https://mkservice.mk-iot.com/subFile/mk2240/curve_four.svg'
      //                 } else if (thant.indexAllData.currState == 4) {
      //                   thant.stateImgUrl =
      //                     'https://mkservice.mk-iot.com/subFile/mk2240/curve_five.svg'
      //                 }
      //               }
      //               if (item.Cmd == 12) {
      //                 const res = parsingData.getNumBycommand(
      //                   item.Cmd,
      //                   item.Value
      //                 )
      //                 thant.lightState = res.lightDelay
      //               }
      //               if (thant.indexAllData !== '' && thant.lightState !== '') {
      //                 thant.empty()
      //                 uni.hideLoading()
      //               }
      //             })
      //           }
      //         }
      //         // 订阅主题传输
      //         thant.client.subscribe(thant.subTopic, {
      //           qos: 1,
      //         })
      //       },
      //       onFailure: function (option) {
      //         uni.showToast({
      //           title: option,
      //           icon: 'error',
      //         })
      //       },
      //     }
      //     this.client.connect(connectOptions)
      //   } catch (error) {
      //     this.$modal.msgError('连接错误')
      //   }
      // },
      // 连接mqtt协议方法
      connect() {
        try {
          const that = this
          // 唯一id生成
          const clientId = `SERVER_${Math.floor(Math.random() * 999) + 1}_${
            that.equipmentNo
          }`
          console.log('连接参数', MQTT_IP, clientId)
          // 连接参数
          var connectOptions = {
            timeout: MQTT_OPTIONS.timeout,
            useSSL: MQTT_OPTIONS.useSSL,
            cleanSession: MQTT_OPTIONS.cleanSession,
            keepAliveInterval: MQTT_OPTIONS.keepAliveInterval,
            reconnect: MQTT_OPTIONS.reconnect,
            mqttVersion: MQTT_OPTIONS.mqttVersion,
            userName: MQTT_OPTIONS.username,
            password: MQTT_OPTIONS.password,
            onSuccess: function () {
              // 订阅主题
              that.client.subscribe(that.subTopic, { qos: 1 })
              // 解析数据
              that.client.onMessageArrived = function (msg) {
                console.log('接受的连接的原始数据', msg)
                console.log('subTopic', that.subTopic)
                const data = JSON.parse(
                  msg.payloadString.replace(/\u0000*$/, '')
                )
                console.log('接收JSON.parse方法处理payloadString的数据', data)
                if (data != null) {
                  data.Data.forEach((item) => {
                    // 解析data的数据
                    if (item.Cmd == 9) {
                      // 解析mqtt的数据，到页面展示去
                      thant.indexAllData = parsingData.getNumBycommand(
                        item.Cmd,
                        item.Value
                      )

                      console.log(
                        '打印页面数据indexALLdata',
                        thant.indexAllData
                      )
                      uni.setStorageSync(
                        'controlPanelVesion',
                        thant.indexAllData.controlPanelVesion
                      )
                      uni.setStorageSync(
                        'upperComputerVesion',
                        thant.indexAllData.upperComputerVesion
                      )
                      if (thant.indexAllData.communicationState != 1) {
                        thant.$modal.msgError('通讯错误')
                        clearInterval(this.realTime)
                        uni.stopPullDownRefresh()
                        uni.hideLoading({
                          noConflict: true,
                        })
                        return
                      }
                      if (thant.indexAllData.connt == false) {
                        thant.$modal.msg('设备订阅已断开，请重启设备')
                        clearInterval(this.realTime)
                        uni.stopPullDownRefresh()
                        uni.hideLoading({
                          noConflict: true,
                        })
                        return
                      }
                      if (thant.indexAllData.currState == 1) {
                        thant.stateImgUrl =
                          'https://mkservice.mk-iot.com/subFile/mk2240/curve_two.svg'
                      } else if (thant.indexAllData.currState == 2) {
                        thant.stateImgUrl =
                          'https://mkservice.mk-iot.com/subFile/mk2240/curve_three.svg'
                      } else if (thant.indexAllData.currState == 3) {
                        thant.stateImgUrl =
                          'https://mkservice.mk-iot.com/subFile/mk2240/curve_four.svg'
                      } else if (thant.indexAllData.currState == 4) {
                        thant.stateImgUrl =
                          'https://mkservice.mk-iot.com/subFile/mk2240/curve_five.svg'
                      }
                    }
                    if (item.Cmd == 12) {
                      const res = parsingData.getNumBycommand(
                        item.Cmd,
                        item.Value
                      )
                      thant.lightState = res.lightDelay
                    }
                    if (thant.indexAllData !== '' && thant.lightState !== '') {
                      thant.empty()
                      uni.hideLoading()
                    }
                  })
                  if (that.indexAllData !== '' && that.lightState !== '') {
                    that.empty()
                    uni.hideLoading()
                  }
                }
              }
            },
            // 失败提醒
            onFailure: function (error) {
              uni.showToast({
                title: '连接失败: ' + error,
                icon: 'error',
              })
            },
          }
          // 连接ip和唯一id
          this.client = new Paho.Client(MQTT_IP, clientId)
          // 连接参数
          this.client.connect(connectOptions)
        } catch (error) {
          this.$modal.msgError('连接错误')
        }
      },
      // 操作开关扭
      getcontrol: async function () {
        // console.log('传给test接口数据1', this.equipmentTypeId)
        // console.log('传给test接口数据类型', this.equipmentNo)
        // console.log('传给test接口数据2', CmdType.AutoOrManual)
        // console.log('传给test接口数据3', OPEN)
        // 后台接口data
        const data = {
          CmdType: CmdType.AutoOrManual,
          OPEN: OPEN,
        }
        const success = await deviceControl(
          this.equipmentTypeId,
          this.equipmentNo,
          data
        )
        console.log('调用接口的返回', success)
        if (success.code != 200) {
          this.$modal.msgError('下发失败')
        }
      },
    },
    onLoad() {
      //获取前3个活动
      this.getIndexData()
      //延迟一秒钟去获取数据
      setTimeout(async () => {
        //链接mqtt
        this.connect()
      }, 1000)
    },
  }
</script>

<style lang="scss" scoped>
  // 变量抽离
  :root {
    --primary-bg-color: rgb(65, 89, 118);
    --switch-img-width: 50rpx;
    --switch-img-height: 60rpx;
    --switch-box-width: 140rpx;
    --box-padding: 23rpx;
    --box-radius: 24rpx;
  }

  .page {
    padding-left: var(--box-padding);
    padding-right: var(--box-padding);

    // 头部
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: var(--primary-bg-color);
      height: 150rpx;
      width: 710rpx;
      // box-shadow: 0 5rpx 3rpx rgba(244, 237, 235, 0.3), 3rpx 4rpx 3rpx rgba(212, 219, 236, 0.3);
      border-radius: var(--box-radius);

      .version {
        margin-left: 12rpx;
      }

      .lock {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 490rpx;

        .lock_box {
          width: 70rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left,
          .middle,
          .right {
            .left_iocn,
            .middle_iocn,
            .right_iocn {
              width: 10rpx;
              height: 20rpx;
            }
          }

          .middle {
            flex-direction: column;

            .middle_text {
              font-size: 28rpx;
            }
          }
        }
      }
    }
    // 底部两盒子
    .content,
    .content2 {
      // 布局方式
      display: flex;
      flex-direction: column;
      align-items: center;
      // 背景
      background-color: var(--primary-bg-color);
      height: 590rpx;
      width: 710rpx;
      // box-shadow: 0 5rpx 3rpx rgba(244, 237, 235, 0.3), 3rpx 4rpx 3rpx rgba(212, 219, 236, 0.3);
      border-radius: var(--box-radius);
      // 间距
      margin-top: 50rpx;

      .switch_top {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 100rpx;

        .switch_box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          // 背景色
          width: var(--switch-box-width);

          .switch_img {
            // 背景
            width: var(--switch-img-width);
            height: var(--switch-img-height);
          }

          .switch_text {
            margin-top: 10rpx;
          }
        }
      }
      // 上栏底部
      .switch_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 150rpx;
        // margin-right: 74rpx;

        .switch_box {
          width: var(--switch-box-width);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .switch_img {
            width: var(--switch-img-width);
            height: var(--switch-img-height);
          }

          .switch_text {
            margin-top: 10rpx;
          }
        }

        .btn_box {
          margin-left: 300rpx;
        }
      }
      // 下栏底部
      .switch_bottom2 {
        display: flex;
        justify-content: flex-start; /* 让内容从左开始排列 */
        align-items: center;
        gap: 100rpx; /* 设置盒子之间的间距，确保前两个盒子和第三个盒子有间隔 */
        margin-top: 150rpx;
        margin-left: -86rpx;

        .switch_box {
          width: var(--switch-box-width);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .switch_img {
            width: var(--switch-img-width);
            height: var(--switch-img-height);
          }

          .switch_text {
            margin-top: 10rpx;
          }
        }

        .btn_box {
          margin-left: 100rpx; /* 调整第三个盒子的间距，确保其与前面两个盒子有间隔 */
        }
      }
    }
  }
</style>
